{% load staticfiles %}
{% load myfilter %}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="A fully featured admin theme which can be used to build CRM, CMS, etc.">
    <meta name="author" content="Coderthemes">

    <link rel="shortcut icon" href="{% static '' %}velonic/img/favicon_1.ico">

    <title>用户中心</title>

    <!-- Bootstrap core CSS -->
    <link href="{% static '' %}velonic/css/bootstrap.min.css" rel="stylesheet">
    <link href="{% static '' %}velonic/css/bootstrap-reset.css" rel="stylesheet">

    <!--Animation css-->
    <link href="{% static '' %}velonic/css/animate.css" rel="stylesheet">

    <!--Icon-fonts css-->
    <link href="{% static '' %}velonic/css/font-awesome.css" rel="stylesheet" />
    <link href="{% static '' %}velonic/css/ionicons.min.css" rel="stylesheet" />
    <link href="{% static '' %}velonic/css/material-design-iconic-font.min.css" rel="stylesheet" />

    <!--Morris Chart CSS -->
    <link rel="stylesheet" href="{% static '' %}velonic/css/morris.css">

    <!-- sweet alerts -->
    <link href="{% static '' %}velonic/css/sweet-alert.min.css" rel="stylesheet">

    <!-- Custom styles for this template -->
    <link href="{% static '' %}velonic/css/style.css" rel="stylesheet">
    <link href="{% static '' %}velonic/css/helper.css" rel="stylesheet">



    <!-- HTML5 shim and Respond.js IE8 support of HTML5 tooltipss and media queries -->
    <!--[if lt IE 9]>
    <script src="js/html5shiv.js"></script>
    <script src="js/respond.min.js"></script>
    <![endif]-->


</head>


<body>

<!-- Aside Start-->
{% include 'velonic/block/side_nav.html' %}
<!-- Aside Ends-->


<!--Main Content Start -->
<section class="content">

<!-- Header -->
{% include 'velonic/block/header.html' %}
<!-- Header Ends -->


<!-- Page Content Start -->
<!-- ================== -->

<div class="wraper container-fluid">
<div class="page-title">
    <h3 class="title">个人中心
    </h3>
</div>




<div class="row">
    <div class="col-lg-3 col-sm-6">
        <div class="tile-stats white-bg">
            <div class="status">
                <h3 class="m-t-0"><span class="counter">{{ wordList.count }}</span></h3>
                <p>个关键词</p>
            </div>
            <div class="chart-inline">
                <span class="inlinesparkline"></span>
            </div>
        </div>
    </div>

    <div class="col-lg-3 col-sm-6">
        <div class="tile-stats white-bg">
            <div class="status">
                <h3 class="m-t-0 counter">{{ productNum }}</h3>
                <p>款产品</p>
            </div>
            <span class="dynamicbar-big"></span>
        </div>
    </div>

    <div class="col-lg-3 col-sm-6">
        <div class="tile-stats white-bg">
            <div class="status">
                <h3 class="m-t-0 counter">{{ storeNum }}</h3>
                <p>个店铺</p>
            </div>
            <span id="compositeline"></span>
        </div>
    </div>

    <div class="col-lg-3 col-sm-6">
        <div class="tile-stats white-bg">
            <div class="col-sm-8">
                <div class="status">
                    <h3 class="m-t-15"><span class="counter">91.5</span>%</h3>
                    <p>完成率</p>
                </div>
            </div>
            <div class="col-sm-4 m-t-20">
                <span class="sparkpie-big"></span>
            </div>
        </div>
    </div>
</div>


<!-- WEATHER -->


<div class="row">

    <div class="col-lg-12">

        <div class="portlet"><!-- /primary heading -->
            <div class="portlet-heading">
                <h3 class="portlet-title text-dark text-uppercase">
                    采集任务列表
                </h3>
                <div class="portlet-widgets">
                    <a href="javascript:;" data-toggle="reload"><i class="ion-refresh"></i></a>
                    <span class="divider"></span>
                    <a data-toggle="collapse" data-parent="#accordion1" href="#portlet2"><i class="ion-minus-round"></i></a>
                    <span class="divider"></span>
                    <a href="#" data-toggle="remove"><i class="ion-close-round"></i></a>
                </div>
                <div class="clearfix"></div>
            </div>
            <div id="portlet2" class="panel-collapse collapse in">
                <div class="portlet-body">
                    <div class="table-responsive">
                        <table class="table">
                            <thead>
                            <tr>
                                <th>#</th>
                                <th>关键词</th>
                                <th>结果数量</th>
                                <th>产品数量</th>
                                <th>更新时间</th>
                                <th>状态</th>
                                <th>操作</th>
                            </tr>
                            </thead>
                            <tbody>
                            {% for word in wordList %}
                              <tr>
                                <td>{{ word.id }}</td>
                                <td><a href="{% url 'products' %}?word={{ word.id }}">{{ word.keyword }}<br />{% if word.keyword_chinese %}{{ word.keyword_chinese }}{% else %}{{ word.id|TranslateSearchWords }}{% endif %}</a></td>
                                <td>{% if not word.category %}<i class="glyphicon glyphicon-pencil" title="纠错" onclick="edit('{{ word.id }}','{{ word.keyword }}')" data-toggle="modal" data-target="#editModal"></i>{% else %}<a href="#">{{ word.category }}</a>{% endif %}</td>
                                <td class="res-{{ word.id }}">{{ word.results }}</td>
                                <td class="num-{{ word.id }}">{{ word.product_num }}</td>
                                <td class="time-{{ word.id }}">{{ word.update_time|date:'Y/m/d H:i:s' }}</td>
                                <td><span class="label {% cycle 'label-success' 'label-pink' 'label-purple' 'label-info' 'label-primary' 'label-warning' %}">{{ word.status }}</span></td>
                                <td class="sta-{{ word.id }}">{% if word.status %}<i class="glyphicon glyphicon-ok-sign"></i>{% else %}<i class="glyphicon glyphicon-play-circle" onclick="caiji('{{ word.id }}')"></i>{% endif %}</td>
                              </tr>
                            {% endfor %}
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div> <!-- end col -->

</div> <!-- end row -->





</div>
<!-- Page Content Ends -->
<!-- ================== -->

<!-- Footer Start -->
{% include 'velonic/block/footer.html' %}
<!-- Footer Ends -->



</section>
<!-- Main Content Ends -->



<div id="editModal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" style="display: none;">
            <div class="modal-dialog">
                <div class="modal-content p-0 b-0">
                    <div class="panel panel-color panel-info">
                        <div class="panel-heading">
                            <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
                            <h3 class="panel-title" id="myEditModal">修改［<i></i>（<span></span>）］的类目</h3>
                        </div>
                        <div class="panel-body">
                            选择类目：
                            <select name="statusData" id="statusData">
                                {% for category in category_list %}
                                <option value="{{ category.id }}">{{ category.name }}</option>
                                {% endfor %}
                            </select>
                            <button class="btn btn-sm btn-primary" style="margin-left: 60px;" id="saveBtn">保 存</button>
                        </div>
                    </div>
                </div><!-- /.modal-content -->
            </div><!-- /.modal-dialog -->
        </div><!-- /.modal -->





<!-- js placed at the end of the document so the pages load faster -->
<script src="{% static '' %}velonic/js/jquery.js"></script>
<script src="{% static '' %}velonic/js/bootstrap.min.js"></script>
<script src="{% static '' %}velonic/js/modernizr.min.js"></script>
<script src="{% static '' %}velonic/js/pace.min.js"></script>
<script src="{% static '' %}velonic/js/wow.min.js"></script>
<script src="{% static '' %}velonic/js/jquery.scrollTo.min.js"></script>
<script src="{% static '' %}velonic/js/jquery.nicescroll.js" type="text/javascript"></script>

<!-- Counter-up -->
<script src="{% static '' %}velonic/js/waypoints.min.js" type="text/javascript"></script>
<script src="{% static '' %}velonic/js/jquery.counterup.min.js" type="text/javascript"></script>

<!-- sparkline -->
<script src="{% static '' %}velonic/js/jquery.sparkline.min.js" type="text/javascript"></script>
<script src="{% static '' %}velonic/js/chart-sparkline.js" type="text/javascript"></script>

<!-- skycons -->
<script src="{% static '' %}velonic/js/skycons.min.js" type="text/javascript"></script>

<!--Morris Chart-->
 <script src="{% static '' %}velonic/js/sweet-alert.min.js"></script>


<script src="{% static '' %}velonic/js/jquery.app.js"></script>

<!-- Dashboard -->


<script type="text/javascript">
    jQuery(document).ready(function($) {
        /* Counter Up */
        $('.counter').counterUp({
            delay: 100,
            time: 1200
        });
    });
    /* BEGIN SVG WEATHER ICON */
    if (typeof Skycons !== 'undefined'){
        var icons = new Skycons(
                        {"color": "#fff"},
                        {"resizeClear": true}
                ),
                list  = [
                    "clear-day", "clear-night", "partly-cloudy-day",
                    "partly-cloudy-night", "cloudy", "rain", "sleet", "snow", "wind",
                    "fog"
                ],
                i;

        for(i = list.length; i--; )
            icons.set(list[i], list[i]);
        icons.play();
    };
</script>
<script>
      function caiji(wordId){
          swal({
            title: "采集任务即将执行!",
            text: "3秒后开始采集.",
            timer: 3000,
            showConfirmButton: false
        });
          $.post("{% url 'aliexpress:search_product_list' %}",{wordId:wordId},function(result){
              //$("span").html(result);
              if(result.error==1){
                  swal("失败", result.msg, "error");
                  return false;
              }else{
                  $(".res-"+wordId).html(result.results);
                  $(".num-"+wordId).html(result.product_num);
                  $(".time-"+wordId).html(result.update_time);
                  $(".sta-"+wordId).html('<i class="glyphicon glyphicon-ok-sign"></i>');
                  swal("采集完毕!");
              }
          });
      }

      $("form#formLink").submit(function(e){
          alert("开始采集产品信息。。");
          $("#loading").css("display","block");
          $("#loading").addClass("lodaing");
      });


     function edit(id,word){
                $('#myEditModal span').html(id);
                $('#myEditModal i').html(word);

            }

    $('#saveBtn').click(function(){
                var cid = $('#statusData').val();
                var wid = $('#myEditModal span').html();
                //alert(track_number);

                location.href = "{% url 'editWordsCategory' %}?wid="+wid+"&cid="+cid;


            });

  </script>


<div id="loading" class="" style="display: none;">
      <img src="{% static 'images/loading.jpg' %}" alt=""/>
  </div>


{% if unread_notice %}
<div id="custom-width-modal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="custom-width-modalLabel" aria-hidden="true" style="display: none;">
                                    <div class="modal-dialog" style="width:55%;">
                                        <div class="modal-content">
                                            <div class="modal-header">
                                                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
                                                <h4 class="modal-title" id="custom-width-modalLabel">您有{{ unread_num }}条未读通知</h4>
                                            </div>
                                            <div class="modal-body">

                                            <div class="panel-group" id="accordion-test-2">
                                                {% for n in unread_notice %}
                            <div class="panel panel-default">
                                <div class="panel-heading">
                                    <h4 class="panel-title">
                                        <a data-toggle="collapse" data-parent="#accordion-test-2" href="#collapseNotice-{{ forloop.counter }}" aria-expanded="false" class="collapsed readNotice" note-id="{{ n.id }}">
                                            {{ n.title }}
                                        </a>
                                    </h4>
                                </div>
                                <div id="collapseNotice-{{ forloop.counter }}" class="panel-collapse collapse" aria-expanded="false">
                                    <div class="panel-body noticeContent">
                                        {% autoescape off %}
                                        {{ n.content }}
                                        {% endautoescape %}
                                    </div>
                                </div>
                            </div>
                                                {% endfor %}
                        </div>

                                            </div>


                                            <div class="modal-footer">
                                                <button type="button" class="btn btn-primary" data-dismiss="modal">关闭</button>
                                            </div>
                                        </div><!-- /.modal-content -->
                                    </div><!-- /.modal-dialog -->
                                </div><!-- /.modal -->

<script>
    $(function () {
        $('#custom-width-modal').modal('show');
    });

</script>
{% endif %}


{% include 'velonic/block/footer_comm.html' %}


</body>
</html>
